<template>
    <uni-notice-bar  style="text-align: center;" text="审批中可撤回重新登记" single color="#FF5F00" background-color="#FFEEDD" />
<view>
  	<view class="beijing">
  		<view v-for="(item,index) in users" >
  		<view class="view">
  			<text class="title">留校原因</text> 
  			<text style="color: red;">*</text><br>
  			<text class="txt">{{item.reason}}</text>
  		</view>
  		<view class="view">
  			<text class="title">计划留校开始时间</text>
  			<text style="color: red;">*</text><br>
  			<text class="txt">{{item.begintime}}</text>
  		</view>
  		<view class="view">
  			<text class="title" >计划留校结束时间</text>
  			<text style="color: red;">*</text><br>
  		<text class="txt">{{item.endtime}}</text>
  		</view>
  		<view class="view">
  			<text class="title">家庭联系人姓名</text>
  			<text style="color: red;">*</text><br>
  		<text class="txt">{{item.name}}</text>
  		</view>
  		<view class="view">
  			<text class="title">家庭联系人电话</text>
  			<text style="color: red;">*</text><br>
  		<text class="txt">{{item.tel}}</text>
  		</view>
  		<view class="view">
  			<text class="title">是否需要校内住宿*</text>
  			<text style="color: red;">*</text><br>
  		<text class="txt">{{item.opt}}</text>
  		</view>
  		</view>
  	</view>
  	
	<view style="margin-left: 12px;">
		<uni-collapse>
			<uni-collapse-item  title="审批流程" open="true">
				<view>
					<text>
						<timeline>
							<timelineItem leftTime='' color="#D4D4D4">
								<view class="tripItem">
									<uni-row>
										<uni-col span="4">
											<view class="ava" style="background-color: #FFD4D4;">
												<text class="ava-txt" style="color: #FE7575;">张</text>
											</view>
										</uni-col>
										<uni-col span="20">
											<view class="title">发起人(学生)</view>
											<view class="tips">张婉悠 <view style="color: #797979; margin-left: 100px;">已发起</view></view>
											
										</uni-col>
									</uni-row>
									
								</view>
							</timelineItem>
							<timelineItem leftTime='' color="#90B8FF" innercolor='#006DFF'>
								
								<view class="tripItem">
									<uni-row>
										<uni-col span="4">
											<view class="ava" style="background-color: #E2E6FF;">
												<text class="ava-txt" style="color: #6A7CE3;">王</text>
											</view>
										</uni-col>
										<uni-col span="20">
											<view class="title">审批人(导师)</view>
											<view class="tips">王小明 <view style="color: #006DFF; margin-left: 100px;">审批中</view></view>
										</uni-col>
									</uni-row>
								</view>
							
							</timelineItem>
							<timelineItem leftTime='' color="#D4D4D4">
								<view class="tripItem">
									<uni-row>
										<uni-col span="4">
											<view class="ava" style="background-color: #FFEAC2;">
												<text class="ava-txt" style="color: #F8852C;">周</text>
											</view>
										</uni-col>
										<uni-col span="20">
											<view class="title">审批人(辅导员)</view>
											<view class="tips">周一围 <view style="color: #FF5300; margin-left: 100px;">待审批</view></view>
										</uni-col>
									</uni-row>
								</view>
							</timelineItem>
							<timelineItem leftTime='' color="#D4D4D4">
								<view class="tripItem">
									<uni-row>
										<uni-col span="4">
											<view class="ava" style="background-color: #E2E6FF;">
												<text class="ava-txt" style="color: #6A7CE3;">王</text>
											</view>
										</uni-col>
										<uni-col span="20">
											<view class="title">审批人(副书记/副院长)</view>
											<view class="tips">王小明 <view style="color: #FF5300; margin-left: 100px;">待审批</view></view>
										</uni-col>
									</uni-row>
								</view>
							</timelineItem>
						</timeline>
					</text>
				</view>
			</uni-collapse-item>
		</uni-collapse>
	</view>
	<view >
		<button class="bu" @click="toindex()">
			<view class="zik">
				<text class="zi">
					撤销登记
				</text>
			</view>

		</button>
	</view>

</view>
  	
</template>

<script setup>
import timeline from '../../components/chenbin-timeline/timeLine.vue'
	import timelineItem from '../../components/chenbin-timeline/timelineItem.vue'
import UniNoticeBar from "../../uni_modules/uni-notice-bar/components/uni-notice-bar/uni-notice-bar.vue";
import { ref } from 'vue';
let users = ref([{
  "reason" :"今年不回家",
  "begintime" : "2024年1月2日 08:30:00",
  "endtime":"2024年1月25日 08:30:00",
  "name" :"张梅林",
  "tel" : "15567899900",
  "opt":"不需要"
}])
let toindex = function(){
uni.switchTab({
	url:'/pages/index/index'
})
  }
</script>

<style scoped>
.beijing{
  width: 100%;
  height: 356px;
  background: #FFFFFF;
  border-radius: 4px;
  margin: 12px;
  padding: 12px;
}
.txt{
  width: 60px;
  height: 17px;
  font-family: PingFangSC-Regular;
  font-weight: 400;
  font-size: 12px;
  color: #797979;

}
.view{
  margin-bottom: 18px;
}
.title{
  width: 180px;
  height: 20px;
  font-family: PingFangSC-Medium;
  font-weight: 500;
  font-size: 14px;
  color: #171717;
  text-align: left;
}
.tripItem {
		height:80px;
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		background:rgba(255,255,255,1);
		box-shadow:0px 0px 20px 0px rgba(0,0,0,0.08);
		border-radius:10px;
		margin-bottom: 0rpx;
	   
	}
	.tripItem .title {
		font-size: 14px;
		 font-family:PingFangSC-Medium,PingFang SC;
		 font-weight:500;
		 color:rgba(51,51,51,1);
	}
	.tripItem .tips {
		/* font-size:22rpx;
		font-family:PingFangSC-Regular,PingFang SC;
		font-weight:400;
		color:rgba(153,153,153,1);
		margin-top: 20rpx; */
		color: #000000e6;
		 font-size: 14px;
		 font-face: PingFangSC;
		 font-weight: 400;
		 line-height: 0;
		 letter-spacing: 0;
		 paragraph-spacing: 0;
		 text-align: left;
		 margin-top: 26px;
	}
	.ava{
		width: 32px;
		height: 32px;
		border-radius: 50%;
		text-align: center;
		
	}
	.ava-txt{
		width: 16px;
		height: 22px;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		font-size: 16px;
		
		line-height: 32px;
	}
	.bu{
		display: block;
		text-align: center;
		line-height: 40px;
		width: 95%;
		height: 40px;
		background-image: linear-gradient(90deg, #6CA9FF 0%, #166AFF 100%);
		border-radius: 4px;
		margin-left: 12px;
	}
	.zi{
		width: 60px;
		height: 21px;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		font-size: 15px;
		color: #FFFFFF;
	}
</style>